<template>
  <div>
    <!-- 创建比赛弹出层 -->
    <van-popup v-model="CreateShow"  closeable close-icon-position="top-left">
      <Create></Create>
    </van-popup>

    <!-- 弹出层  切换联赛 -->
    <van-popup v-model="show" position="right" :overlay="true" closeable close-icon-position="top-left">
      <!-- 切换联赛组件 -->
      <SwitchLeague></SwitchLeague>
    </van-popup>

    <!-- 导航栏 -->
    <van-nav-bar title="比赛"  class="TopNav">
      <template #left>
        <van-icon name="exchange" size="18" color="white" @click="showPopup"/>
      </template>
      <template #right>
        <van-icon name="plus" size="18" color="white" @click="CreateShowpopup"/>
      </template>
    </van-nav-bar>

    <!-- 比赛页 未结束&已结束 导航栏 -->

    <van-tabs v-model="active2" line-width="15vw" title-active-color="#ee0a24">
      <van-tab :title="'全部'+'('+this.CreateLeague[this.logoindex].CompetitionInfo.length+')' ">
        <unFinished></unFinished>
      </van-tab>
      <van-tab :title="'已结束'+'('+this.endbisai.length+')' ">
        <Finished></Finished>
      </van-tab>
    </van-tabs>

  </div>
</template>

<script>
import SwitchLeague from '@/components/Switch_League/Switch_League.vue'
import unFinished from '@/components/notFinished/notFinished.vue'
import Finished from '@/components/Finished/Finished.vue'
import Create from '@/components/CreateCompetition/CreateCompetition.vue'
import { mapState } from 'vuex'
export default {
  name: 'component-work',
  data () {
    return {
      StatisticsShow: false,
      CreateShow: false,
      show: false,
      active: 0,
      active2: 2
    }
  },
  computed: {
    ...mapState(['logoindex', 'endbisai', 'CreateLeague'])
  },
  components: {
    unFinished,
    Finished,
    Create,
    SwitchLeague
  },
  methods: {
    showPopup () {
      this.show = true
      console.log(this.logoindex)
    },
    CreateShowpopup() {
      this.CreateShow = true
    }
  }
}
</script>

<style scoped>
.TopNav {
  background-color: black;
}

::v-deep .van-nav-bar__title{
  color: rgb(255, 255, 255);
}
.van-popup {
  display: inline-block;
  width: 100%;
  height: 100%;
}
.work_nav {
  display: inline-block;
  width: 12vw;
  height: 12vw;
  /* background-color: saddlebrown; */
  padding: 2vw;
}
.race {
  width: 64vw;
  height: 12vw;
  /* background-color: seagreen; */
  text-align: center;
  font-size: 5.5vw;
  line-height: 12vw;
  color: rgb(241, 241, 241);
}
.search {
  width: 12vw;
  height: 12vw;
  /* background-color: brown; */
  padding: 2vw;
}
.create {
  width: 12vw;
  height: 12vw;
  /* background-color: rgb(57, 184, 119); */
  padding: 2vw;
}
</style>
